<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    

    <title>Hexo + GitHub Pages搭建个人博客 | </title>
    <meta name="author" content="Gaius Yao">
    
    <meta name="description" content="Gaius Yao Blog">
    
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta property="og:title" content="Hexo + GitHub Pages搭建个人博客"/>
    <meta property="og:site_name" content="尧翔的个人博客"/>

    
    <meta property="og:image" content=""/>
    

    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="alternate" href="/atom.xml" title="尧翔的个人博客" type="application/atom+xml">
    <link rel="stylesheet" href="/css/lib/materialize.min.css">
    <link rel="stylesheet" href="/css/lib/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">

    
        <link rel="stylesheet" href="/css/lib/prettify-tomorrow-night-eighties.css" type="text/css">
    
    <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>


<body>
    <img src="/weixin_favicon.png" style="position: absolute; left: -9999px; opacity: 0; filter: alpha(opacity=0);">

    <nav class="blue">
    <div class="nav-wrapper">
        <a href="#" data-activates="main-menu" class="button-collapse">
            <i class="fa fa-navicon"></i>
        </a>
        <div class="">
            <a href="/" class="brand-logo hide-on-med-and-down">尧翔的个人博客</a>
            <ul class="right hide-on-med-and-down">
                
                    <li>
                        <a class="menu-home " href="/" >
                            <i class="fa fa-home "></i>
                            
                            首页
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-archive " href="/archives" >
                            <i class="fa fa-archive "></i>
                            
                            归档
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                            <i class="fa fa-bookmark "></i>
                            
                            分类
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-reading " href="/reading" >
                            <i class="fa fa-book "></i>
                            
                            读书
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-about " href="/about" >
                            <i class="fa fa-user "></i>
                            
                            关于
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-search modal-trigger " href="#search" >
                            <i class="fa fa-search "></i>
                            
                            搜索
                        </a>
                    </li>
                
            </ul>
            <div>
    <ul class="side-nav blue darken-1" id="main-menu">
        
        <li class="side-user">
            <div class="row">
                <div class="col s4 no-padding">
                    <img class="avatar-image circle responsive-img" src="http://oxv2o8wp9.bkt.clouddn.com/gaius.jpg" alt="User Avatar">
                </div>
                <div class="info col s8 valign-wrapper no-padding">
                    <div class="valign">
                        <p class="name">尧翔</p>
                        <p class="desc">PM, UXer, Huge Nerd</p>
                    </div>
                </div>
            </div>
        </li>
        

        
            <li class="no-padding">
                <a class="waves-effect menu-home " href="/" >
                    <i class="fa fa-home "></i>
                    
                    首页
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-archive " href="/archives" >
                    <i class="fa fa-archive "></i>
                    
                    归档
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                    <i class="fa fa-bookmark "></i>
                    
                    分类
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-reading " href="/reading" >
                    <i class="fa fa-book "></i>
                    
                    读书
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-about " href="/about" >
                    <i class="fa fa-user "></i>
                    
                    关于
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-search modal-trigger " href="#search" >
                    <i class="fa fa-search "></i>
                    
                    搜索
                </a>
            </li>
        
    </ul>

    <ul class="side-nav blue darken-1" id="category-menu">
    

            

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/项目介绍/">
                    项目介绍 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/项目介绍/Gaius-Blog/">
                    Gaius-Blog <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/项目介绍/Gaius-Things-Done/">
                    Gaius-Things-Done <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-2" collapse-level="2">
                <a class="no-padding" href="/categories/项目介绍/Gaius-Things-Done/GTD笔记/">
                    GTD笔记 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/categories/代码之路/">
                    代码之路 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/categories/代码之路/微小的教程/">
                    微小的教程 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-2" collapse-level="2">
                <a class="no-padding" href="/categories/代码之路/微小的教程/Hexo/">
                    Hexo <span class="right">1 篇</span></a>
                </a>
            </li>

        

    </ul>
</div>

        </div>
    </div>
</nav>

<div id="search" class="modal search-modal">
    <div class="row">
        <div class="input-field col s12">
              <input id="search-input" type="text">
              <label for="search-input">搜索</label>
        </div>

    </div>
    <div id="search-result" class="search-result col s12">

    </div>
</div>


    <main>
        <div class="container main-container">
    <nav class="page-nav hide-on-small-only">
    <div class="nav-wrapper blue">
        <span class="breadcrumb">当前位置（分类目录）</span>
        
            
    
    
    <a class="breadcrumb" href="/categories/代码之路/">代码之路</a><a class="breadcrumb" href="/categories/代码之路/微小的教程/">微小的教程</a><a class="breadcrumb" href="/categories/代码之路/微小的教程/Hexo/">Hexo</a>


        

        
    </div>
</nav>

<article>
    <div class="card">
        <div class="card-content">
            

            <div class="article-title">
                
    
        <h1>Hexo + GitHub Pages搭建个人博客</h1>
    


            </div>
            <time class="deep-orange-link-context" datetime="2017-10-14T16:00:00.000Z"><a href="/2017/10/15/hexo-githubpages/">2017-10-15</a></time>

            <span id="busuanzi_container_page_pv" class="read-times-container">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_page_pv"></span>
</span>

            
    <div class="tags-row">
        
            <a href="/tags/Coding/" class="chip deep-orange lighten-1">Coding</a>
        
            <a href="/tags/Hexo/" class="chip deep-orange lighten-1">Hexo</a>
        
    </div>


            <div class="toc deep-orange-link-context hide-on-med-and-down">
    <ol class="section table-of-contents"><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#（一）Hexo的安装与常用命令"><span class="section table-of-contents-text">（一）Hexo的安装与常用命令</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#1-1-安装前的准备"><span class="section table-of-contents-text">1.1 安装前的准备</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#1-2-安装Hexo"><span class="section table-of-contents-text">1.2 安装Hexo</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#1-3-Hexo常用命令"><span class="section table-of-contents-text">1.3 Hexo常用命令</span></a></li></ol></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#（二）GitHub-Pages"><span class="section table-of-contents-text">（二）GitHub Pages</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#2-1-Github-Pages介绍"><span class="section table-of-contents-text">2.1 Github Pages介绍</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#2-2-部署Hexo到Github-Pages"><span class="section table-of-contents-text">2.2 部署Hexo到Github Pages</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#2-3-使用hexo-deploy部署"><span class="section table-of-contents-text">2.3 使用hexo deploy部署</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#2-4-使用git命令行部署"><span class="section table-of-contents-text">2.4 使用git命令行部署</span></a></li></ol></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#（三）Hexo主题"><span class="section table-of-contents-text">（三）Hexo主题</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#3-1-使用Hexo主题"><span class="section table-of-contents-text">3.1 使用Hexo主题</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#3-2-Hexo主题配置"><span class="section table-of-contents-text">3.2 Hexo主题配置</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#3-3-创建Hexo主题"><span class="section table-of-contents-text">3.3 创建Hexo主题</span></a></li></ol></li><li class="section table-of-contents-item section table-of-contents-level-2"><a class="section table-of-contents-link" href="#（四）写博客"><span class="section table-of-contents-text">（四）写博客</span></a><ol class="section table-of-contents-child"><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#4-1-创建新文章"><span class="section table-of-contents-text">4.1 创建新文章</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#4-2-布局-Layout-和标题-tilte"><span class="section table-of-contents-text">4.2 布局(Layout)和标题(tilte)</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#4-3-写作和草稿"><span class="section table-of-contents-text">4.3 写作和草稿</span></a></li><li class="section table-of-contents-item section table-of-contents-level-3"><a class="section table-of-contents-link" href="#4-4-模板-Scaffold"><span class="section table-of-contents-text">4.4 模板(Scaffold)</span></a></li></ol></li></ol>
</div>


            <div class="entry deep-orange-link-context">
                <p>  今天刚建好博客，还没什么内容可以放上来，就先从如何搭建个人博客（毕竟在这走了不少弯路）开始，写一篇微小的教程吧！<br>首先，笔者的个人博客是使用Hexo + GitHub Pages搭建的。至于为什么要使用Hexo来搭建个人博客，而不是GitHub Pages钦定的jeklly，这和笔者被jeklly坑过完全没关系，主要是Hexo足够快速、简洁和高效。不过这里不展开介绍了，详细介绍可以看<a href="https://hexo.io/" target="_blank" rel="external">Hexo官网</a>，英语不好的同学点<a href="https://hexo.io/zh-cn/" target="_blank" rel="external">这里</a>。接着，我们先从<strong>Hexo的安装与常用命令</strong>开始，介绍如何使用Hexo + GitHub Pages搭建个人博客。</p>
<p><em>// 笔者系统环境为win10</em></p>
<h2 id="（一）Hexo的安装与常用命令"><a href="#（一）Hexo的安装与常用命令" class="headerlink" title="（一）Hexo的安装与常用命令"></a>（一）Hexo的安装与常用命令</h2><h3 id="1-1-安装前的准备"><a href="#1-1-安装前的准备" class="headerlink" title="1.1 安装前的准备"></a>1.1 安装前的准备</h3><p>  在安装Hexo前，需要先安装Noed.js以及Git，如果还未接触过两者，可参考下面的链接。</p>
<ul>
<li><a href="https://nodejs.org/en/" target="_blank" rel="external">下载Node.js</a></li>
<li><a href="http://www.runoob.com/nodejs/nodejs-install-setup.html" target="_blank" rel="external">Node.js的安装和配置</a></li>
<li><a href="https://git-scm.com/download/" target="_blank" rel="external">下载Git</a></li>
<li><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703354d8c6c01c904c7d9ff056ae23da865a000" target="_blank" rel="external">安装Git</a></li>
</ul>
<h3 id="1-2-安装Hexo"><a href="#1-2-安装Hexo" class="headerlink" title="1.2 安装Hexo"></a>1.2 安装Hexo</h3><p>  完成Noed.js和Git的安装后，先别急，花几分钟看看如何使用<a href="http://www.runoob.com/nodejs/nodejs-npm.html" target="_blank" rel="external">NPM</a>，然后在命令行中按下面的代码进行操作。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">$ md hexo/blog <span class="comment"># 创建hexo文件夹，win用户为\</span></div><div class="line">$ <span class="built_in">cd</span> hexo <span class="comment"># 进入hexo文件夹</span></div><div class="line">$ npm install hexo-cli -g <span class="comment"># 使用 npm 安装 Hexo</span></div><div class="line">$ hexo init blog </div><div class="line">$ <span class="built_in">cd</span> blog </div><div class="line">$ npm install</div><div class="line">$ hexo g <span class="comment"># == hexo generate，生成静态网站</span></div><div class="line">$ hexo s <span class="comment"># == hexo server，启动服务器</span></div></pre></td></tr></table></figure>
<p>  完成上述操作后，打开<a href="http://localhost:4000/" target="_blank" rel="external">http://localhost:4000/</a>访问结果。</p>
<h3 id="1-3-Hexo常用命令"><a href="#1-3-Hexo常用命令" class="headerlink" title="1.3 Hexo常用命令"></a>1.3 Hexo常用命令</h3><blockquote>
<ol>
<li>hexo g(hexo generate) 生成静态文件</li>
<li>hexo s(hexo server) 启动本地web服务，用于预览</li>
<li>hexo d(hexo deploy) 部署到远端（如github）</li>
<li>hexo n(hexo new) 新建页面或文章</li>
<li>hexo v(hexo version) 查看版本信息</li>
<li>hexo help <command> 查看命令帮助</li>
<li>hexo clean 清除缓存文件 (db.json) 和已生成的静态文件 (public)</li>
<li>hexo list <type> 列出网站资料</type></li>
</ol>
</blockquote>
<h2 id="（二）GitHub-Pages"><a href="#（二）GitHub-Pages" class="headerlink" title="（二）GitHub Pages"></a>（二）GitHub Pages</h2><h3 id="2-1-Github-Pages介绍"><a href="#2-1-Github-Pages介绍" class="headerlink" title="2.1 Github Pages介绍"></a>2.1 Github Pages介绍</h3><p>  GitHub Pages是全球最大同性交友网站<a href="https://github.io" target="_blank" rel="external">GitHub</a>免费提供给开发者的一款介绍托管项目的产品，多用于建设个人主页或项目介绍，因为本文侧重讲如何用Hexo + GitHub Pages搭建个人博客，这里就不做太多展开了，想要了解GitHub Pages的同学可以看下面两个链接：</p>
<ul>
<li><a href="https://pages.github.com/" target="_blank" rel="external">GitHub Pages主页</a></li>
<li><a href="http://www.jianshu.com/p/c5d5cb61d4e9" target="_blank" rel="external">给懒癌患者看的GitHub Pages手册</a></li>
</ul>
<h3 id="2-2-部署Hexo到Github-Pages"><a href="#2-2-部署Hexo到Github-Pages" class="headerlink" title="2.2 部署Hexo到Github Pages"></a>2.2 部署Hexo到Github Pages</h3><p>  最激动人心的一步来了，将Hexo部署到Github Pages后，就可以在你的github.io上看到Hexo搭建的个人博客。不过，首先让我们明确要做什么，基本上部署到Github Pages就是两步：<code>hexo g</code> 生成静态网站和<code>git commit</code>提交代码，但具体操作需要使用hexo deploy或git命令行。</p>
<h3 id="2-3-使用hexo-deploy部署"><a href="#2-3-使用hexo-deploy部署" class="headerlink" title="2.3 使用hexo deploy部署"></a>2.3 使用hexo deploy部署</h3><p>  使用hexo deploy部署，首先要安装一个拓展：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install --save hexo-deployer-git</div></pre></td></tr></table></figure>
<p>  接着要在配置文件<code>blog\_config.yml</code>的<code># Deployment</code>下做如下修改：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">deploy:</div><div class="line">  <span class="built_in">type</span>: git</div><div class="line">  repo: git@github.com:jiji262/jiji262.github.io.git</div><div class="line">  branch: master</div></pre></td></tr></table></figure>
<p>  然后在命令行中执行如下代码，即可完成部署。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo d <span class="comment"># 等同于hexo deploy</span></div></pre></td></tr></table></figure>
<p><em>// 关于使用hexo deploy部署，可参考<a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">这个链接</a></em></p>
<h3 id="2-4-使用git命令行部署"><a href="#2-4-使用git命令行部署" class="headerlink" title="2.4 使用git命令行部署"></a>2.4 使用git命令行部署</h3><p>  使用git命令行进行部署也很简单，只需要先在<code>blog</code>下创建一个<code>.deploy</code>文件夹，再将创建的<code>repo</code>克隆(clone)到本地，然后按如下代码部署：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">$ <span class="built_in">cd</span> d:/hexo/blog</div><div class="line">$ git <span class="built_in">clone</span> git@github.com:gaiusyao/gaiusyao.github.io.git .deploy/jiji262.github.io</div><div class="line">$ hexo g <span class="comment"># 等同于hexo generate</span></div><div class="line">$ cp -R public/* .deploy/gaiusyao.github.io <span class="comment">#拷贝blog/public文件夹内容到git目录下</span></div><div class="line">$ <span class="built_in">cd</span> .deploy/jiji262.github.io</div><div class="line">$ git add .</div><div class="line">$ git commit -m “update blog”</div><div class="line">$ git push origin master</div></pre></td></tr></table></figure>
<h2 id="（三）Hexo主题"><a href="#（三）Hexo主题" class="headerlink" title="（三）Hexo主题"></a>（三）Hexo主题</h2><h3 id="3-1-使用Hexo主题"><a href="#3-1-使用Hexo主题" class="headerlink" title="3.1 使用Hexo主题"></a>3.1 使用Hexo主题</h3><p>  使用Hexo非常简单，首先在Hexo官网的<a href="https://hexo.io/themes/" target="_blank" rel="external">主题页面</a>挑选适合的主题，这里推荐笔者朋友的<a href="https://github.com/GeekaholicLin/hexo-theme-ylion" target="_blank" rel="external">yolin</a>主题，然后在blog下使用命令行执行：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ git <span class="built_in">clone</span> https://github.com/GeekaholicLin/hexo-theme-ylion.git themes/yolin</div></pre></td></tr></table></figure>
<p>  修改<code>blog</code>目录下的<code>_config.yml</code>配置文件中的<code>theme</code>属性，将其设置为<code>yolin</code>，即可使用新的Hexo主题。</p>
<h3 id="3-2-Hexo主题配置"><a href="#3-2-Hexo主题配置" class="headerlink" title="3.2 Hexo主题配置"></a>3.2 Hexo主题配置</h3><p>  Hexo主题的配置和你所采用的主题有关，不同的主题需要不同的配置，主题的配置文件是<code>blog\themes</code>文件夹下的<code>_config.yml</code>。下面，以笔者使用的<code>raytaylorism</code>为例，介绍Hexo主题的配置项：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div></pre></td><td class="code"><pre><div class="line">menu: <span class="comment"># 菜单配置（若不需要某项可直接删除）</span></div><div class="line">    - id: home</div><div class="line">        link: /</div><div class="line">        icon: home</div><div class="line">        class: menu-home</div><div class="line">    - id: archives</div><div class="line">        link: /archives</div><div class="line">        icon: archive</div><div class="line">        class: menu-archive</div><div class="line">    - id: category</div><div class="line">        link: javascript:;</div><div class="line">        category: <span class="literal">true</span></div><div class="line">        icon: bookmark</div><div class="line">        class: menu-category</div><div class="line">    - id: reading</div><div class="line">        link: /reading</div><div class="line">        icon: book</div><div class="line">        class: menu-reading</div><div class="line">    - id: about</div><div class="line">        link: /about</div><div class="line">        icon: user</div><div class="line">        class: menu-about</div><div class="line"></div><div class="line">color: <span class="comment"># 颜色配置</span></div><div class="line">  header: blue</div><div class="line">  footer: blue</div><div class="line">  page_nav: blue</div><div class="line">  side_nav: blue darken-1</div><div class="line">  tag: deep-orange lighten-1</div><div class="line">  article_title_link: blue</div><div class="line">  link: deep-orange</div><div class="line">  pagination: deep-orange</div><div class="line">  tab: deep-orange</div><div class="line">  archive_item: grey</div><div class="line">  fab: deep-orange</div><div class="line">  fab_2: cyan</div><div class="line">  fab_3: orange darken-1</div><div class="line">  new: deep-orange</div><div class="line">  about_header: blue</div><div class="line">  about_title: blue</div><div class="line"></div><div class="line">archive_yearly: <span class="literal">true</span></div><div class="line"></div><div class="line">copyright: © 2017 Gaius-Yao, All rights reserved. <span class="comment"># 版权信息</span></div><div class="line"></div><div class="line">disqus_shortname: <span class="comment"># Disqus评论shortname，若为空则不启用</span></div><div class="line">duoshuo_shortname: <span class="comment"># 多说shortname，若为空则不启用</span></div><div class="line">yungentie_product_key: <span class="comment"># 网易云跟帖productKey，从通用代码中获取，若为空则不启用</span></div><div class="line">google_analytics: <span class="comment"># Google分析track id，若为空则不启用</span></div><div class="line">tencent_analytics: 63863615 <span class="comment"># 腾讯分析sId，若为空则不启用</span></div><div class="line">google_code_prettify: prettify-tomorrow-night-eighties <span class="comment"># 高亮的主题，若为空则使用默认主题</span></div><div class="line"></div><div class="line">mathjax: <span class="literal">true</span> <span class="comment"># 是否启用MathJax数学公式渲染。如果你确认整个站点的博文都不会用到Latex数学公式，可以将其该项设为false提高页面加载速度</span></div><div class="line">page_stat: <span class="literal">true</span> <span class="comment"># 是否启用网页计数器</span></div></pre></td></tr></table></figure>
<h3 id="3-3-创建Hexo主题"><a href="#3-3-创建Hexo主题" class="headerlink" title="3.3 创建Hexo主题"></a>3.3 创建Hexo主题</h3><p>  详见下篇Hexo教程——<a href="#">制作Hexo主题</a>。</p>
<h2 id="（四）写博客"><a href="#（四）写博客" class="headerlink" title="（四）写博客"></a>（四）写博客</h2><h3 id="4-1-创建新文章"><a href="#4-1-创建新文章" class="headerlink" title="4.1 创建新文章"></a>4.1 创建新文章</h3><p>  Hexo写博客极其简单，可以执行下列命令来创建一篇新文章：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new [layout] &lt;title&gt;</div></pre></td></tr></table></figure>
<h3 id="4-2-布局-Layout-和标题-tilte"><a href="#4-2-布局-Layout-和标题-tilte" class="headerlink" title="4.2 布局(Layout)和标题(tilte)"></a>4.2 布局(Layout)和标题(tilte)</h3><p>  Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径：</p>
<blockquote>
<ul>
<li>post:  source/_posts</li>
<li>page:  source</li>
<li>draft: source/_drafts</li>
</ul>
</blockquote>
<p>  而自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。</p>
<p><em>// Hexo 默认以标题做为文件名称，但也可以在<code>_config.yml</code>编辑’new_post_name’修改默认文件名称。</em></p>
<h3 id="4-3-写作和草稿"><a href="#4-3-写作和草稿" class="headerlink" title="4.3 写作和草稿"></a>4.3 写作和草稿</h3><p>  Hexo写作采用<a href="http://www.jianshu.com/p/075d7cac8fef" target="_blank" rel="external">markdown语法</a>，完成后使用<code>hexo g</code>即可生成静态html页面。</p>
<p>  而使用上一部分提到的<code>draft</code>布局创建的草稿，在建立时会被保存到<code>source/_drafts</code>文件夹，可以通过<code>publish</code>命令将其移到<code>source/_posts</code>文件夹内发布：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo publish [layout] &lt;title&gt;</div></pre></td></tr></table></figure>
<h3 id="4-4-模板-Scaffold"><a href="#4-4-模板-Scaffold" class="headerlink" title="4.4 模板(Scaffold)"></a>4.4 模板(Scaffold)</h3><p>  在新建文章时，Hexo会根据<code>scaffolds</code>文件夹内相对应的文件（即模板）来建立文件，例如：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new photo <span class="string">"My Gallery"</span></div></pre></td></tr></table></figure>
<p>  在执行这行指令时，Hexo 会尝试在<code>scaffolds</code>文件夹中寻找<code>photo.md</code>，并根据其内容建立文章，以下是可以在模版中使用的变量：</p>
<blockquote>
<ul>
<li>layout: 布局</li>
<li>title:  标题</li>
<li>date:   文件建立日期</li>
</ul>
</blockquote>

                
<p class="deep-orange-link-context">
    <a href="/2017/10/20/gaius-blog-history/" rel="next" title="个人博客的迭代历程">
    上一篇：个人博客的迭代历程
  </a>
</p>




            </div>
			
        </div>
    </div>
</article>






</div>

        <div class="fixed-action-btn float-sitemap">
    <a class="btn-floating btn-large deep-orange">
      <i class="fa fa-caret-square-o-up"></i>
    </a>
    <ul>
      <li><a class="btn-return-top btn-floating waves-effect cyan" title="回到顶部"><i class="fa fa-arrow-circle-o-up"></i></a></li>
      <li><a class="btn-floating waves-effect button-collapse orange darken-1"  data-activates="main-menu" title="菜单"><i class="fa fa-navicon"></i></a></li>
    </ul>
  </div>

    </main>
    <footer class="page-footer blue darken-1">
    
    <div class="footer-container container">
        <div class="row">
            
            <div class="social-group col m8 s12">
                <h5 class="white-text">社交</h5>
                
                    <a class="social-link" href="https://github.com/gaiusyao" target="_blank">
                        <i class="fa fa-2x fa-github"></i>
                    </a>
                
                    <a class="social-link" href="https://codepen.io/gaiusyao/" target="_blank">
                        <i class="fa fa-2x fa-codepen"></i>
                    </a>
                
                    <a class="social-link" href="/atom.xml" target="_blank">
                        <i class="fa fa-2x fa-rss"></i>
                    </a>
                
                <!--

    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
    </script>
    <div class="site-visitors-container white-text">
        <span>
            <i class="fa fa-user"></i>
            <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
        </span>
        <span>&nbsp;|&nbsp;</span>
        <span>
            <i class="fa fa-eye"></i>
            <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
        </span>
    </div>

-->

            </div>
            

            
            <div class="col m4 s12">
                <h5 class="white-text">友情链接</h5>
                
                    <a class="social-link" href="https://william8188.github.io/" target="_blank">李梓峰的技术博客</a>
                
            </div>
            
        </div>
    </div>
    

    <div class="footer-copyright deep-orange-link-context">
        <div class="container">
            © 2017 Gaius-Yao, All rights reserved.
            <p class="right" style="margin-top: 0;">Blog powered by <a href="https://hexo.io">Hexo</a> | Theme <a href="https://github.com/raytaylorlin/hexo-theme-raytaylorism">raytaylorism</a></p>
        </div>
    </div>
</footer>


    <noscript>
    <div class="noscript">
        <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
    </div>
</noscript>
<div class="noscript">
    <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
</div>


<script src="/js/jquery.min.js"></script>
<script src="/js/materialize.min.js"></script>

<script>
    (function($) {
        $(document).ready(function() {
            // 隐藏禁用javascript（针对微信内置浏览器）的提示
            $('.noscript').hide();

            // 图片缩放效果
            var $imgs = $('img').not('.slider-image').not('.avatar-image').not('.carousel-image').not('.card-cover-image').not('.qrcode');

            // 给图片加上点击放大效果（materialbox插件）
            $imgs.addClass('materialboxed').each(function(i, el) {
                $(this).attr('data-caption', $(this).attr('alt') || ' ');
            }).materialbox();

            // 优化表格的显示
            $('table').each(function() {
                var $table = $(this);
                // 除去多行代码的情况
                if ($table.find('pre').length == 0) {
                    $table.addClass('responsive-table striped bordered');
                }
            });

            // 首页幻灯片
            $('.slider').slider({indicators: true, full_width: true, interval: 8000});

            $(".button-collapse").sideNav();
            $(".category-menu").sideNav();

            // 针对gallery post
            $('.carousel').carousel({full_width: true});
            $('.carousel-control.prev').click(function() {
                $('.carousel').carousel('prev');
            });
            $('.carousel-control.next').click(function() {
                $('.carousel').carousel('next');
            });

            // 文章目录
            $('article').not('.simple-article').find('h1').add('h2').add('h3').add('h4').add('h5').add('h6').scrollSpy();

            // 目录随屏幕滚动（防止目录过长越过footer）
            var $toc = $('.toc');
            var scrollTargetTop = 0;
            $(window).scroll(function() {
                var $activeLink = $toc.find('a.active.section');
                if ($(window).scrollTop() < 100) {
                    scrollTargetTop = 0;
                } else {
                    if ($activeLink[0]) {
                        scrollTargetTop = $activeLink.offset().top - $toc.offset().top;
                    }
                }
                $toc.css('top', '-' + scrollTargetTop + 'px');
            });

            // 修正文章目录的left-border颜色
            var color = $('.table-of-contents-text').css('color');
            $('.table-of-contents-link').css('border-left-color', color);

            // 针对移动端做的优化：FAB按钮点击一下收回
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                $('.fixed-action-btn').addClass('click-to-toggle');
            }
            // 回到顶部
            $('.btn-return-top').click(function() {
                $('body, html').animate({
                    scrollTop: 0
                }, 500);
            });

            // 重置读书页面的Tab标签页的颜色
            $('li.tab a').hover(function() {
                $(this).toggleClass('text-lighten-4');
            });
            $('.indicator').addClass('deep-orange lighten-2');

            
            // 添加new标签
            $('.menu-search').append('<span class="new badge deep-orange"></span>');
            

            // 搜索功能
            $('.modal-trigger').leanModal({
                // 打开搜索框时自动聚焦
                ready: function() {
                    if ($('#search').is(":visible")) {
                        $('#search-input').focus();
                    }
                }
            });
            var searchXml = "search.xml";
            if (searchXml.length == 0) {
             	searchXml = "search.xml";
            }
            var searchPath = "/" + searchXml;
            initSearch(searchPath, 'search-input', 'search-result');
        });

        // 初始化搜索与匹配函数
        var initSearch = function(path, search_id, content_id) {
            'use strict';
            $.ajax({
                url: path,
                dataType: "xml",
                success: function(xmlResponse) {
                    // get the contents from search data
                    var datas = $("entry", xmlResponse).map(function() {
                        return {
                            title: $("title", this).text(),
                            content: $("content", this).text(),
                            url: $("url", this).text()
                        };
                    }).get();
                    var $input = document.getElementById(search_id);
                    var $resultContent = document.getElementById(content_id);
                    $input.addEventListener('input', function() {
                        var str = '<ul class=\"search-result-list\">';
                        var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                        $resultContent.innerHTML = "";
                        if (this.value.trim().length <= 0) {
                            return;
                        }
                        // perform local searching
                        datas.forEach(function(data) {
                            var isMatch = true;
                            var content_index = [];
                            var data_title = data.title.trim().toLowerCase();
                            var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                            var data_url = data.url;
                            var index_title = -1;
                            var index_content = -1;
                            var first_occur = -1;
                            // only match artiles with not empty titles and contents
                            if (data_title != '' && data_content != '') {
                                keywords.forEach(function(keyword, i) {
                                    index_title = data_title.indexOf(keyword);
                                    index_content = data_content.indexOf(keyword);
                                    if (index_title < 0 && index_content < 0) {
                                        isMatch = false;
                                    } else {
                                        if (index_content < 0) {
                                            index_content = 0;
                                        }
                                        if (i == 0) {
                                            first_occur = index_content;
                                        }
                                    }
                                });
                            }
                            // show search results
                            if (isMatch) {
                                keywords.forEach(function(keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    data_title = data_title.replace(regS, "<span class=\"search-keyword deep-orange lighten-2\">" + keyword + "</span>");
                                });

                                str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                                var content = data.content.trim().replace(/<[^>]+>/g, "");
                                if (first_occur >= 0) {
                                    // cut out 100 characters
                                    var start = first_occur - 20;
                                    var end = first_occur + 80;
                                    if (start < 0) {
                                        start = 0;
                                    }
                                    if (start == 0) {
                                        end = 100;
                                    }
                                    if (end > content.length) {
                                        end = content.length;
                                    }
                                    var match_content = content.substring(start, end);
                                    // highlight all keywords
                                    keywords.forEach(function(keyword) {
                                        var regS = new RegExp(keyword, "gi");
                                        match_content = match_content.replace(regS, "<span class=\"search-keyword deep-orange lighten-2\">" + keyword + "</span>");
                                    });

                                    str += "<p class=\"search-result\">..." + match_content + "...</p>"
                                }
                                str += "</li>";
                            }
                        });
                        str += "</ul>";
                        $resultContent.innerHTML = str;
                    });
                }
            });
        }
    })(jQuery);
</script>


<script src="/js/prettify.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("pre").addClass("prettyprint");
        prettyPrint();
    });
</script>




<script type="text/javascript" src="http://tajs.qq.com/stats?sId=63863615" charset="UTF-8"></script>



<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async
  src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>



</body>
</html>
